<script setup lang='ts'>
import { computed, onMounted, ref } from 'vue'
import { NAvatar, NPopover } from 'naive-ui'
import SubscribeTo from '../SubscribeTo/index.vue'
import LoginDialog from '../LoginDialog/index.vue'
import RechargeDialog from '../RechargeDialog/index.vue'
import { useUserStore } from '@/store'
import defaultAvatar from '@/assets/avatar.jpg'
import { isString } from '@/utils/is'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const loginRef = ref<any>(null)
const subPay = ref<any>(null)
const rechargeDialog = ref<any>()
const openPay = () => {
  subPay.value?.show()
}
const toLogin = () => {
  loginRef.value?.show()
}
const toRecharge = () => {
  rechargeDialog.value?.show()
}
onMounted(() => {
  // console.log(userStore.userInfo)
  // const token = sessionStorage.getItem('token')
  // if (token)
  //   userStore.getUserInfo()
})
</script>

<template>
  <NPopover trigger="click" content-style="userinfo-dialog-style" style="width:350px">
    <template #trigger>
      <div class="flex items-center overflow-hidden" style="cursor: pointer;">
        <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
          <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
            <NAvatar size="large" round :src="userInfo.avatar" :fallback-src="defaultAvatar" />
          </template>
          <template v-else>
            <NAvatar size="large" round :src="defaultAvatar" />
          </template>
        </div>
        <div class="flex-1 min-w-0 ml-2">
          <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
            {{ userInfo.name }}
            <span
              v-if="!userInfo.token" style="font-size: 12px;color: #18A058;cursor: pointer;"
              @click.stop="toLogin"
            >去登录</span>
          </h2>
          <p v-if="userInfo.token" class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
            余额：{{ userInfo.balance }}
            <span style="cursor: pointer;color:#18A058" title="点击充值" @click.stop="toRecharge">充值</span>
          </p>
          <p
            v-if="userInfo.token" class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap"
            style="cursor: pointer;color:#18A058" title="点击订阅" @click.stop="openPay"
          >
            订阅截止：{{ userInfo.subscribeTime ? new Date(userInfo.subscribeTime).toLocaleDateString() : '暂无订阅' }}
          </p>
        </div>
      </div>
    </template>
    <div>
      <h1 class="font-weight font-bold text-md " style="">
        账户信息：
      </h1>
      <div class="flex-1 min-w-0 ml-2 font-bold">
        <p v-if="userInfo.token" class="overflow-hidden text-sm text-gray-500 text-ellipsis whitespace-nowrap">
          余额：{{ userInfo.balance }}
          <span style="cursor: pointer;color:#18A058" title="点击充值" @click.stop="toRecharge">充值</span>
        </p>
        <p
          v-if="userInfo.token" class="overflow-hidden text-sm text-gray-500 text-ellipsis whitespace-nowrap"
          style="cursor: pointer;" title="点击订阅" @click.stop="openPay"
        >
          订阅截止：{{ userInfo.subscribeTime ? new Date(userInfo.subscribeTime).toLocaleDateString() : '暂无订阅' }}
        </p>
      </div>
      <div class="ml-2 font-bold">
        <div
          class="text-sm text-gray-500 text-ellipsis whitespace-nowrap"
          style="cursor: pointer;color:#18A058;margin-bottom: 3px;"
        >
          资源包：
        </div>
        <div class="res-item flex item-center">
          <div class="res-item-left">
            GPT3.5会话：{{ userStore.userInfo.subscribeTime ? '无限制' : '订阅后无限制' }}
          </div>
          <div class="res-item-right" @click="openPay">
            +订阅
          </div>
        </div>
        <div class="res-item flex item-center">
          <div class="res-item-left">
            GPT4.0：{{ userStore.userInfo.resourceMap.gpt4 }}次
          </div>
          <div class="res-item-right" @click="openPay">
            +订阅
          </div>
        </div>
        <div class="res-item flex item-center">
          <div class="res-item-left">
            AI绘画：{{ userStore.userInfo.resourceMap.image }}次
          </div>
          <div class="res-item-right" @click="openPay">
            +订阅
          </div>
        </div>
      </div>
    </div>
  </NPopover>

  <SubscribeTo ref="subPay" />
  <LoginDialog ref="loginRef" />
  <RechargeDialog ref="rechargeDialog" />
</template>

<style>
.custom-card .n-card-header {
  display: none !important;
}

.custom-card .n-card__content {
  padding: 0 !important;
}

.custom-card-put .n-card-header {
  display: block !important;
}

.custom-card-put .n-card__content {
  padding: 20px !important;
}

.res-item {
  background: rgb(213 255 212);
  color: rgb(66 193 62);
  padding: 3px 20px;
  border-radius: 20px;
  justify-content: space-between;
  padding-right: 5px;
  padding-left: 10px;
  margin-bottom: 3px;
}

.res-item-right {
  background: #40e363;
  padding: 0px 10px;
  border-radius: 13px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
}
</style>
